<template>
    <div>
        <div class="product" :key="product._id">
            <router-link :to="'/detail/' + product._id" class="product-link">
                <p class="product_name">产品名称：{{ product.name }}</p>
                <p class="product_description">介绍：{{ product.description }}</p>
                <p class="product_price">价格：{{ product.price }}</p>
                <p class="product_manufacturer">生产厂商：{{ product.manufacturer.name }}</p>
                <img alt="" :src="product.image" class="product_image" />
            </router-link>
            <!-- <button @click="addToCart(product)">加入购物车</button> -->
            <product-button :product="product"></product-button>
        </div>
    </div>
</template>

<script>
import ProductButtonVue from './ProductButton.vue'
import ProductDetailVue from './ProductDetail.vue'
export default {
    name: 'product-item',
    props: ['product'],
    components: {
        'product-detail': ProductDetailVue,
        'product-button': ProductButtonVue
    }
}
</script>

<style>
.product {
  border-bottom: 1px solid black;
}

.product__image {
  width: 100px;
  height: 100px;
}
</style>
